<template>
  <div class="else-detail">
    <div class="one" v-for="item in list">
      <div v-if="filterType(item.picName)===1" class="img-box">
        <img :src="item.fileGuid" alt="">
      </div>
      <div v-else-if="filterType(item.picName)===2" class="img-box">
        <img src="../../../../public/img/video.png" alt="">
      </div>
      <svg v-else class="icon" aria-hidden="true" style="font-size:50px">
        <use :xlink:href="`#${filterType(item.picName)}`"></use>
      </svg>
      <div class="desc">
        <h1 class="more" :title="item.picName">{{item.picName}}</h1>
        <p>{{item.fileSize}}</p>
        <a href="javascript:void(0)">
          <el-button size="small" type="text" @click="look(item)">预览</el-button>
        </a>
        <a href="javascript:void(0)">
          <el-button size="small" type="text" @click="downLoad(item)">下载</el-button>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
    import {fileStreamDown} from '@/api/mail/'
    import {getType} from '@/util/file'
    export default {
        name: "MailFile",
        props: ['list'],
        methods: {
            //预览
            look(row){
                const target = ['.jpg','.jpeg','.png','.mp4','.ogg'];
                const type = getType(row.picName);
                if(target.includes(type)){//包含 - 直接打开
                    window.open(row.fileGuid,'_target')
                }else{
                    this.downLoad(row)
                }
            },
            //下载
            downLoad(row) {
                fileStreamDown(row.id).then(res => {
                    var blob = new Blob([res.data]);
                    var downloadElement = document.createElement('a');
                    var href = window.URL.createObjectURL(blob); // 创建下载的链接
                    downloadElement.href = href;
                    downloadElement.download = row.picName; // 下载后文件名
                    document.body.appendChild(downloadElement);
                    downloadElement.click(); // 点击下载
                    document.body.removeChild(downloadElement); // 下载完成移除元素
                    window.URL.revokeObjectURL(href); // 释放掉blob对象
                })
            },
            //转换文件单位
            dealSize(size) {
                size = size.toString();
                if (size.indexOf('KB') != -1 || size.indexOf('B') != -1 || size.indexOf('MB') != -1) {
                    return size;
                }
                let result = parseInt(size / 1024);
                if (result > 1024) {
                    return parseInt(result / 1024) + 'M';
                }
                return result + 'KB';
            },
            //判断文件类型
            filterType(name) {
                name = name.toLowerCase();
                //截取类型
                let index = name.lastIndexOf(".");
                let fileName = "." + name.substr(index + 1);
                let images = ['.jpg', '.jpeg', '.png', '.gif'];
                let videos = ['.avi', '.mp4', '.wav', '.rm', '.rmvb', '.mov', '.dat', '.wmv', '.3gp', '.amv', '.dmv', '.flv'];
                let files = ['.ppt', '.pptx', '.pdf', '.doc', '.psd', '.txt', '.xls', '.xlsx','.eml','.zip','.rar'];
                //图片判断
                if (images.includes(fileName)) {
                    return 1
                } else if (videos.includes(fileName)) {
                    return 2
                } else if (files.includes(fileName)) {
                    switch (fileName) {
                        case '.ppt':
                            return 'icon-ppt';
                        case '.pptx':
                            return 'icon-ppt';
                        case '.pdf':
                            return 'icon-pdf'
                        case '.doc':
                            return 'icon-doc'
                        case '.psd':
                            return 'icon-psd'
                        case '.txt':
                            return 'icon-txt'
                        case '.xlsx':
                            return 'icon-xlsx'
                        case '.xls':
                            return 'icon-xlsx'
                        case '.eml':
                            return 'icon-youjian2'
                        case '.zip':
                            return 'icon-zip'
                        case '.rar':
                            return 'icon-zip'
                        default:
                            return 'icon-folder'
                    }
                } else {
                    return 'icon-wenjian1'
                }
            }
        }
    }
</script>

<style scoped lang="scss">
  .else-detail {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;

    .one {
      display: flex;
      align-items: center;
      margin-right: 10px;
      margin-bottom: 10px;

      .img-box {
        width: 55px;
        height: 55px;
        border-radius: 5px;
        line-height: 55px;
        /*border: 1px solid #ddd;*/
        overflow: hidden;
      }

      img {
        width: 100%;
        height: auto;
        max-height: 55px;
        vertical-align: middle;
      }

      .desc {
        padding-left: 5px;

        h1 {
          width: 100px;
          font-size: 12px;
          color: #000;
        }

        p {
          font-size: 12px;
        }

        .el-button--text {
          color: #409EFF;
          background: 0 0;
          border-bottom: 1px solid #409EFF;
          border-radius: 0;
          padding: 3px 0;
        }
      }
    }
  }
</style>
